<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定style 对象语法</title>
</head>
<body>
<div id="app">
  <h1 style="color: red; text-decoration: underline">Hello, World！</h1>

  <h1 v-bind:style="{color: 'red'}">Hello, World！</h1>
  <!--  SyntaxError: Unexpected token '-'-->

  <h1 v-bind:style="{textDecoration: 'underline'}">Hello, World！</h1>
  <h1 v-bind:style="{color: 'red', textDecoration: 'underline'}">Hello, World！</h1>
  <h1 v-bind:style="{color: isColorDecorated, textDecoration: isTextDecorated}">Hello, World！</h1>
  <h1 v-bind:style="abc">Hello, World！</h1>
</div>

<script type="module">

  import {createApp} from "../../../../../js/vue.esm-browser.js";

  const app = createApp({
    setup(){
      let isColorDecorated =  "silver"
             let  isTextDecorated = " underline double"

              let abc = {
                color: "red",
                // text-decoration: underline
                /*
                * JavaScript 语言标识符定义要求：
                *   必须以字母、下划线或美元符号开头。
                *   可以包含字母、数字、下划线和美元符号。
                *   标识符区分大小写。
                * */
                // 针对样式中的 -， 将其删掉并将其后面的第一个字母大写——转换为驼峰式写法。驼峰命名法将标识符中的每个单词首字母大写，除了第一个单词
                textDecoration: "underline",
              }
      return {
        isTextDecorated,
        isColorDecorated,
        abc,
      }
    }
  })

  app.mount("#app")
</script>
</body>
</html>